<script setup>
import { useI18n } from 'vue-i18n'
import configuration from './components/notify/configuration.vue'
import emailConfig from './components/notify/emailConfig.vue'
import messageConfig from './components/notify/messageConfig.vue'
import alarmConfig from './components/notify/alarmConfig.vue'
import { useThemeVars } from 'naive-ui'

const themeVars = useThemeVars()

const value = ref('1')

const { t } = useI18n()
</script>

<template>
  <div
    :style="{ backgroundColor: themeVars.bodyColor, position: 'sticky', top: '0px', zIndex: 1000 }"
  >
    <n-tabs type="card" style="margin-top: 2px; padding: 0px 2px" v-model:value="value">
      <n-tab name="1" :tab="t('alarm.globalConfiguration')"> </n-tab>
      <n-tab name="2" :tab="t('alarm.emailConfiguration')"> </n-tab>
      <n-tab name="3" :tab="t('alarm.smsConfiguration')"> </n-tab>
      <n-tab name="4" :tab="t('alarm.alarmSettings')"> </n-tab>
    </n-tabs>
  </div>
  <div class="mt-4">
    <configuration v-show="value == 1" />
    <emailConfig v-show="value == 2" />
    <messageConfig v-show="value == 3" />
    <alarmConfig v-show="value == 4" />
  </div>
</template>

<style scoped></style>
